<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/jquery.mobile-1.4.5.min.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div data-role="page">
        <div data-role="header">
            <h1>头部</h1>
        </div>
        <div data-role="main" class="ui-content">
            <h1>内容部分</h1>
            <a href="#my" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">显示弹窗</a>
            <div data-role="popup" id="my" class="ui-content">
                <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-icon-notext ui-btn-right">关闭</a>
                <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-delete ui-btn-icon-notext ui-btn-left">关闭</a>
                <h3>欢迎光临！！！</h3>
                <p>"ui-content" 类在弹窗使用 <span style="font-size:55px;">样式文本</span> 时是特别有用的，它可以使得弹窗看起来更加美观时尚。 <strong>注意：</strong> 如果需要文本会包含多行。</p>
            </div>

            <a href="#popup1" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all" data-position-to="window">弹窗1</a>
            <a href="#popup2" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all" data-position-to="#demo">弹窗2</a>
            <a href="#popup3" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all" data-position-to="origin">弹窗3</a>
            <div data-role="popup" id="popup1" class="ui-content">
                <p>在窗口中间显示</p>
            </div>
            <div data-role="popup" id="popup2" class="ui-content">
                <p>我在demo元素上显示</p>
            </div>
            <div data-role="popup" id="popup3" class="ui-content">
                <p>我显示在点击的按钮上</p>
            </div>
            <p>我是一个段落</p>
            <p id="demo">我是一个段落</p>
            <p>我是一个段落</p>
        </div>
        <div data-role="footer">
            <h1>底部</h1>
        </div>
    </div>
</body>
</html>